<template>
  <div style="height: 240px">
    <div class="h-full flex flex-col">
      <div class="flex-shrink-0 flex flex-row justify-center">
        <div
          :class="`${selectedTypeArr.indexOf(1) >= 0 ? 'bg-[red]' : 'selected'}`"
          class="text-white px-3 cursor-pointer"
          @click="onFilter(1)"
        >
          第一类(图例1)
        </div>
        <div
          :class="`${selectedTypeArr.indexOf(2) >= 0 ? 'bg-[blue]' : 'selected'}`"
          class="text-white px-3 cursor-pointer"
          @click="onFilter(2)"
        >
          第一类(图例2)
        </div>
      </div>
      <div class="h-0 flex-1">
        <ChartView ref="chartViewRef"></ChartView>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
const chartViewRef = ref()

const data = [
  { value: 120, _source: { type: 1 } },
  { value: 200, _source: { type: 2 } },
  { value: 150, _source: { type: 2 } },
  { value: 80, _source: { type: 1 } },
  { value: 70, _source: { type: 1 } },
  { value: 110, _source: { type: 1 } },
  { value: 130, _source: { type: 1 } },
]
let serieData = data
const option = {
  title: {
    text: '图表标题',
    show: false,
  },
  /**
   * tooltip配置
   */
  tooltip: {},
  grid: { top: 20 },
  /**
   * 图例配置
   *
   * 要显示图例，series中的每个对象都必须配置name属性, 默认的图例文案就是name值
   */
  legend: {
    show: false,
  },
  /**
   * x坐标轴配置
   */
  xAxis: {
    /**
     * 坐标轴类型
     * 'value' 数值轴，适用于连续数据。
     * 'category' 类目轴，适用于离散的类目数据。
     * 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
     * 'log' 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。
     */
    type: 'category',
    /**
     * x轴数据
     */
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  /**
   * y坐标轴配置
   */
  yAxis: {
    type: 'value',
  },
  /**
   * 图表配置
   */
  series: [
    {
      name: '第一类',
      /**
       * 图表类型
       */
      type: 'bar',
      /**
       * 图表数据
       */
      data: serieData,
      itemStyle: {
        color: function (params) {
          return params.value < 150 ? 'red' : 'blue'
        },
      },
    },
  ],
}

const selectedTypeArr = ref([1, 2])
function onFilter(type) {
  if (selectedTypeArr.value.indexOf(type) >= 0) {
    selectedTypeArr.value = selectedTypeArr.value.filter(item => item !== type)
  } else {
    selectedTypeArr.value.push(type)
  }

  serieData = data.map(item => {
    if (selectedTypeArr.value.indexOf(item._source.type) >= 0) {
      return item
    } else {
      return null
    }
  })
  const newOptons = {
    series: [
      {
        name: '第一类',
        data: serieData,
      },
    ],
  }
  chartViewRef.value.setOption(newOptons)
}
onMounted(() => {
  chartViewRef.value.setOption(option)
})
</script>

<style scoped>
.selected {
  background-color: #f3f3f3;
  color: black;
}
</style>
